<template>
  <n-modal class="bg" v-model:show="dialogVisible" preset="dialog" :show-icon="false" transform-origin="center"
    :block-scroll="false">
    <n-input class="mt-11" placeholder="邮箱号" v-model:value="registerForm.username"></n-input>
    <n-input-group class="mt-11">
      <n-input placeholder="验证码" v-model:value="registerForm.code"></n-input>
      <n-button color="#49b1f5" :disabled="flag" @click="sendCode">
        {{ timer == 0 ? '发送' : `${timer}s` }}
      </n-button>
    </n-input-group>
    <n-input class="mt-11" type="password" show-password-on="click" placeholder="密码"
      v-model:value="registerForm.password"></n-input>
    <n-button ref="registerRef" class="mt-11" color="#e9546b" style="width:100%" :loading="loading"
      @click="handleRegister">
      注册
    </n-button>
    <div class="mt-10"><span class="dialog-text">已有账号？</span><span class="colorFlag" @click="handleLogin">登录</span>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import { getCode, login, register } from "@/api/login";
import { LoginForm } from "@/api/login/types";
import { UserForm } from "@/model";
import useStore from "@/store";
import { setToken } from "@/utils/token";
import { useIntervalFn } from '@vueuse/core';
const { app, user } = useStore();
const registerRef = ref();
const data = reactive({
  timer: 0,
  flag: false,
  loading: false,
  registerForm: {
    username: "",
    password: "",
    code: "",
  } as UserForm,
});
const { timer, flag, loading, registerForm } = toRefs(data);
const { pause, resume } = useIntervalFn(() => {
  timer.value--;
  if (timer.value <= 0) {
    // 停止定时器
    pause();
    flag.value = false;
  }
}, 1000, { immediate: false });
const start = (time: number) => {
  flag.value = true;
  timer.value = time;
  // 启动定时器
  resume();
};
const sendCode = () => {
  let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  if (!reg.test(registerForm.value.username)) {
    window.$message?.warning("邮箱格式不正确");
    return;
  }
  start(60);
  getCode(registerForm.value.username).then(({ data }) => {
    if (data.flag) {
      window.$message?.success("发送成功");
    }
  });
};
const handleRegister = () => {
  if (registerForm.value.code.trim().length != 6) {
    window.$message?.warning("请输入6位验证码");
    return;
  }
  if (registerForm.value.password.trim().length < 6) {
    window.$message?.warning("密码不能少于6位");
    return;
  }
  loading.value = true;
  register(registerForm.value).then(({ data }) => {
    if (data.flag) {
      let loginForm: LoginForm = {
        username: registerForm.value.username,
        password: registerForm.value.password,
      }
      login(loginForm).then(({ data }) => {
        if (data.flag) {
          registerForm.value = {
            username: "",
            password: "",
            code: "",
          }
          setToken(data.data);
          user.GetUserInfo();
          window.$message?.success("登录成功");
          app.setRegisterFlag(false);
        }
      });
    }
    loading.value = false;
  });
};
const dialogVisible = computed({
  get: () => app.registerFlag,
  set: (value) => app.registerFlag = value,
});
const handleLogin = () => {
  app.setRegisterFlag(false);
  app.setLoginFlag(true);
};
</script>

<style scoped></style>